<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="width: 30px;">
        <input type="checkbox" id="1" />1
        <input type="checkbox" id="2" />2
        <input type="checkbox" id="3" />3
        <input type="checkbox" id="4" />4
        <input type="checkbox" id="5" />5
        <input type="checkbox" id="6" />6
        <input type="checkbox" id="7" />7
        <input type="checkbox" id="8" />8
        <input type="checkbox" id="9" />9
    </div>

    <script>
        const syncFile = (id) => {
            console.log(`[${new Date().toLocaleString()}][开始同步文件] id：${id}`);
        }

        // 虚拟代理
        const proxySyncFile = (() => {
            let cache = []; // 保存一段时间内需要同步的 ID
            let timer; // 定时器

            return (id) => {
                cache.push(id);
                if (timer) return; // 保证不会覆盖已经启动的定时器

                timer = setTimeout(() => {
                    syncFile(cache.join(',')); // 2s 后向本体发送需要同步的 ID 集合
                    clearTimeout(timer);
                    timer = null;
                    cache.length = 0; // 清空 ID 集合
                }, 2000);
            }
        })();
    </script>
    <script>
        let checkbox = document.querySelectorAll('input');
        for (let c of checkbox) {
            c.onclick = function() {
                if (this.checked) {
                    proxySyncFile(this.id);
                }
            }
        }
    </script>
</body>

</html>